<template>
	<view class="main">
		<view class="card">
			<view class="topCard">
				<view class="item">
					<text>{{list[0].patients_name}}</text>
					<text class="tag">{{list[0].relationship}}</text>
				</view>
				<view class="btn" @click="open('bottom')">
					<image src="/static/images/切换.png"></image>
				</view>
			</view>
			<view class="bottomCard">
				<text class="idCard">{{list[0].patients_id_number}}</text>
				<text class="personItem2">切换就诊人</text>
			</view>
		</view>
		<view class="section1">
			<text class="item2">近一年</text>
			<text class="item3" @click="showPicker">选择时间</text>
			<rangeDatePick 
			    :show="isShow"
			    @showchange="showchange"
			    :start="start"
			    :end="end"
			    :value="value"
			    @change="bindChange"
			    @cancel="bindCancel"
			    themeColor="#4C83D6"
			    fields="day"
			></rangeDatePick>
		</view>
		<view class="section2" v-for="item in arr">
			<view class="card1" @click="tiaoZhuan(item.id)">
				<view class="cardItem1">
					<view class="desc">{{item.desc}}</view>
					<view class="name">
						<text>{{item.keShi}}</text>
						<text class="name2">{{item.name}}</text>
					</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="cardItem2">
					<text>￥</text>
					<text>{{item.price}}</text>
				</view>
			</view>
		</view>
		<view>
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="tanTitle">选择就诊人</view>
				<view class="tanSection">
					<view class="tanCard" v-for="item in listS" @click="change(item.patients_id)">
						<view>
							<view>
								<text>{{item.patients_name}}</text>
								<text class="tag">{{item.relationship}}</text>
							</view>
							<view class="idCard idCard2">{{item.patients_id_number}}</view>
						</view>
						<view class="idCard3"> &gt; </view>
					</view>
			
				</view>
				
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	export default {
		components: {rangeDatePick},
		data() {
			const currentDate = this.getDate({format: true})
			return {
				arr:[{
					id:1,
					desc:'西药费',
					keShi:'消化内科',
					name:"刘美",
					time:'2022-04-16 11:05',
					price:'200'
				},{
					id:2,
					desc:'西药费',
					keShi:'神经内科',
					name:"李磊",
					time:'2022-05-16 11:05',
					price:'300'
				},{
					id:3,
					desc:'体检费',
					keShi:'耳鼻喉科',
					name:"张新",
					time:'2022-06-12 10:05',
					price:'3000'
				}],
				nowDate:currentDate,//获取当前时间
				isShow:false,
				value:[],
				start:"1900-01-01",
				end:"2200-12-01",
				type: "default",
				inverted: false,
				type2:'center',
				list:{},
				list2:{},
				listS:{},
			}
		},
		methods: {
			showPicker(e){
			    this.isShow=true;
			   },
			   showchange(){
			    this.isShow=!this.isShow;
			   },
			   bindChange(data){
			    console.log(data)
			    this.chooseDate=data[0]+"至"+data[1]
			   },
			   bindCancel(e){
			    console.log(e)
			   },
			   getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			   },
			   setType() {
			       let types = ["default", "primary", "success", "warning", "error"];
			       let index = types.indexOf(this.type);
			       types.splice(index, 1);
			       let randomIndex = Math.floor(Math.random() * 4);
			       this.type = types[randomIndex];
			   },
			   setInverted() {
			       this.inverted = !this.inverted;
			   },
			   open(type2){
					this.type2=type2;
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			        this.$refs.popup.open(type2);
			   },
			   tiaoZhuan(val){
				   uni.setStorageSync('dataList3',this.list)
				   uni.navigateTo({
				   	url: `/pages/myCenter/outpatient/paymentDetails/paymentDetails?id=${val}`
				   });
			   },
			   change(value){
			   	this.listS.forEach((item)=>{
			   		if(value==item.patients_id){
			   			this.list[0]=item
			   		}
			   	})
			   	console.log(this.list,555);
				console.log(this.listS,666);
				let index=0;
				this.listS.forEach((item2)=>{
					// console.log(item2);
					// console.log(this.list2[0])
					// console.log(this.list[0]);
					index++;
					if(item2.patients_id==this.list[0].patients_id){
						index--;
						this.listS.splice(index,1);
						this.listS.push(this.list2[0])
						this.list2[0]=this.list[0]
					}
				})
				console.log(this.listS);
			   	this.$refs.popup.close();
			   }
		},
		created() {
		console.log(uni.getStorageSync('listBR'));	
		this.list=uni.getStorageSync('listBR');
		this.list2=uni.getStorageSync('listBR');
		console.log(this.list,this.list2);
		console.log(uni.getStorageSync('listChange'));	
		this.listS=uni.getStorageSync('listChange')
		
		uni.setStorageSync('dataPay',this.arr)
		}
	}
</script>

<style>
	.main{
		padding: 30rpx;
		box-sizing: border-box;
		/* border: 1rpx solid mediumvioletred; */
	}
	.card{
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 1rpx solid royalblue;
		height: 200rpx;
		background-color: #F5F9FF;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.topCard{
		display: flex;
		justify-content: space-between;
	}
	.tag{
			border-radius: 20rpx;
			background-color: #E2EDFE;
			padding: 2rpx 15rpx;
			box-sizing: border-box;
			font-size: 25rpx;
			color: #2E88FF;
			margin-left: 20rpx;
		}
	.btn{
		margin-right: 40rpx;
		padding:5rpx 10rpx ;
		background-color: gainsboro;
		border-radius: 50%;
	}
	image{
		width: 25rpx;
		height: 25rpx;
	}
	.bottomCard{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.idCard{
		color: #939598;
		font-size: 25rpx;
	}
	.personItem2{
		color: #939598;
		font-size: 25rpx;
	}
	.section1{
		/* border: 1px solid blue; */
		padding: 40rpx 20rpx;
		box-sizing: border-box;
	}
	.item2{
		background-color: #2E88FF;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
	}
	.item3{
		background-color: #E4F0FF;
		color: #2E88FF;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
	}
	.card1{
		padding: 20rpx;
		box-sizing: border-box;
		border: 1px solid rgba(0, 0, 0, 0.2);
		box-shadow:  1px 2px 2px 1px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.section2{
		margin-bottom: 30rpx;
	}
	.cardItem2{
		color: coral;
	}
	.name,.time{
		color: rgba(0, 0, 0, 0.4);
	}
	.name{
		padding: 20rpx 0;
		box-sizing: border-box;
	}
	.name2{
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.tanSection{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tanTitle{
		padding: 30rpx;
		box-sizing: border-box;
		text-align: center;
	}
	.tanCard{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		padding: 30rpx;
		box-sizing: border-box;
	}
	.idCard2{
		padding-top: 30rpx;
		box-sizing: border-box;
	}
	.idCard3{
		color: #939598;
		font-size: 30rpx;
	}
</style>
